<template>
    <div class="row">
        <div class="col-md-12 detail_box">
            <h2>个人信息</h2>

            <div class="info_first">
                <el-avatar :size="150">
                        <img src='https://img2.baidu.com/it/u=807316040,667422073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' alt="">
                </el-avatar>
                <div>
                    <h3>
                        <span style="color:#40485b;">{{userDetail.username}}</span>
                    </h3>
                </div>

                <p>生日：{{userDetail.birthday}}</p>
                <p>性别：{{userDetail.gender}}</p>
                <p>邮箱：{{userDetail.email}}</p>
                <p>创建时间：{{userDetail.gmtCreate}}</p>
                <p>密码： {{userDetail.password}}</p>
                <p>手机：{{userDetail.mobile}}</p>
                <button type="button" class="btn btn-sm btn-outline-success" @click="goUserEdit">个人设置</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-sm btn-outline-primary" @click="goMyArticle">我的文章</button><br/><br/><br/><br/>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // 个人信息
      userDetail: {
        username: localStorage.getItem('username'),
        uid: localStorage.getItem('uid'),
        avatar: localStorage.getItem('avatar'),
        email: localStorage.getItem('email'),
        birthday: localStorage.getItem('birthday'),
        gender: localStorage.getItem('gender'),
        gmtCreate: localStorage.getItem('gmtCreate'),
        mobile: localStorage.getItem('mobile'),
        password: localStorage.getItem('password')
      },
      // // 后台url
      // backUrl: 'http://120.25.169.204:8080',

      reverse: true,
      // 我的文章贡献数
      myArtcleTotal: '',
      // 我的文章列表
      myArtcle: [],
      // 获取文章参数
      myArtcleQuery: { cur: '', size: '', flag: true },
      // 我的文章数据统计
      myArticleAnalysis: {},
      // 分类名列表
      classNameList: [],

      // 图表数据
      chartData: [],
      chartPie: null
    }
  },
  computed: {
    ...mapState(
      {
        userDetail: state => state.user.userInfo,
        backUrl: state => state.user.backUrl
      }
    )
  },
  methods: {
    // 统计个人发表文章的信息
    async getArticleAnalysis () {
      const { data: res } = await this.$http.get('/blog/all.do')
      // console.log(res)
      if (res.code !== 200) return
      this.myArticleAnalysis = res.data
    },
    // 获取所有分类名
    async getClassNameList () {
      const { data: res } = await this.$http.get('/category/all.do')
      // console.log(res)
      if (res.code !== 200) return
      this.classNameList = res.data
      for (var key in this.myArticleAnalysis.class) {
        var name = key
        var value = this.myArticleAnalysis.class[key]
        this.chartData.push({ name, value })
      }
      console.log(this.chartData)
    },
    getab () {
      return this.classNameList
    },
    // 跳转到个人信息编辑页
    goUserEdit () {
      this.$router.push('/user/UserEdit')
    },
    // 跳转到文章分类页
    goMyArticle () {
      this.$router.push('/blogFind')
    },
    // 饼状图
    initChartPie () {
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['Vue', 'Spring', 'Bootstrap', 'Java', 'Python']

        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 9, name: 'Vue' },
              { value: 5, name: 'Spring' },
              { value: 3, name: 'Bootstrap' },
              { value: 1, name: 'Java' },
              { value: 10, name: 'Python' }
            ]
            // data: this.chartData

          }
        ]
      }

      this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
      this.chartPie.setOption(option)
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    }

  },
  created () {
    // this.getUserDetail()
    this.getArticleAnalysis()
  },
  mounted () {
    this.initChartPie()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartPie) {
      this.chartPie.resize()
    }
  }

}
</script>

<style lang="less" scoped>
.row{
    div{
        // border:1px solid red;
    }
    .detail_box{
      padding-top: 2%;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 1%;
        .info_first{
            text-align: center;
            .el-avatar{
                border: 1px solid rgb(243, 219, 190);
                background-color: rgb(252, 251, 249);
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                padding: 8px;
                position: relative;
                img{
                    border-radius: 50%;
                    width: 90%;
                    height: 90%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: #fff;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                }
            }
        }
        .info_second{
            padding: 2% 3%;

        }
    }
    .statistic_box{
        background-color: rgb(208, 233, 243);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 1%;
        // 不给高度，无法显示echarts
        .chart-box {
            min-height: 400px;
        }

        .block{

            h5{
            font-size: 18px;
            color: #333;
            text-align: left;
            border-right: none;
            padding: 2% 0% 3%;
          }
          .radio{
            margin-bottom: 2%;
          }
          .title_{
            padding-bottom: 2%;
          }
          .left_{
            float: left;
            font-size: 0.9rem;
            color: #888;
            i{
              margin-left: 5px;
              margin-right: 2px;
            }
          }
          .right_{
            float: right;
            font-size: 0.8rem;
            color: #aaa;
            i{
              margin-left: 5px;
              margin-right: 2px;
            }
          }
        }
    }
}
</style>
